<template>
  <div style="position:relative">
  <div class="pagetitle ">归档</div>
  <div class="pageSecondtitle">这么多年来，你真的做到不负韶华了吗？</div>
  <div class="guidangDiv">
    <v-timeline
      dense
      clipped
    >
      <v-timeline-item
        fill-dot
        class="white--text mb-12"
        color="red"
        large
      >
        <template v-slot:icon>
          <span>JL</span>
        </template>
        <v-text-field
          v-model="input"
          hide-details
          flat
          label="Leave a comment..."
          solo
          @keydown.enter="comment"
        >
        </v-text-field>
      </v-timeline-item>

      <!-- <v-timeline-item
        class="mb-4"
        small
      >
        <v-row justify="space-between">
          <v-col cols="7">
            <v-chip
              class="white--text ml-0"
              color="purple"
              label
              small
            >
              APP
            </v-chip>
            Digital Downloads fulfilled 1 item.
          </v-col>
          <v-col
            class="text-right"
            cols="5"
          >
            15:25 EDT
          </v-col>
        </v-row>
      </v-timeline-item> -->


      <v-timeline-item
        color="grey"
        small
        v-for="(item) of archiveList"
        :key="item.id"
      >
        <v-row  >
                    <v-col
            cols="12" md="2" 
          >
            <b>{{item.createTime|formatDate('yyyy-MM-dd')}}</b>
          </v-col>
          <v-col cols="12" md="8" class="tag-cloud">
          <router-link :to="'/articles/' + item.id">
            <div>{{item.articleTitle}}</div>
          </router-link>
          </v-col>

        </v-row>
      </v-timeline-item>
    </v-timeline>
  </div>
  </div>
</template>

<script>
import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";
export default {
  created() {
    this.listArchives();
  },
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  },
  data: function() {
    return {
      current: 1,
      count: 0,
      archiveList: []
    };
  },
  methods: {
    listArchives() {
      this.axios
        .get("/articles/archives", {
          params: { current: this.current,size :500 }
        })
        .then(({ data }) => {
          data.data.recordList.forEach(item=>{
            item.createTime =item.createTime.substring(0,10)
          })
          this.archiveList = data.data.recordList;
          this.count = data.data.count;
        });
    }
  },
  computed: {
    cover() {
      var cover = "";
      this.$store.state.blogInfo.pageList.forEach(item => {
        if (item.pageLabel == "archive") {
          cover = item.pageCover;
        }
      });
      return "background: url(" + cover + ") center center / cover no-repeat";
    }
  },
  watch: {
    current(value) {
      this.axios
        .get("/api/articles/archives", {
          params: { current: value }
        })
        .then(({ data }) => {
          this.archiveList = data.data.recordList;
          this.count = data.data.count;
        });
    }
  }
};
</script>

<style scoped>
.time {
  font-size: 0.75rem;
  color: #555;
  margin-right: 1rem;
}
.guidangTitle{

}
.guidangDiv{
 max-width:80%;
 margin-left: 25%;
}

@media (max-width: 500px) {
.guidangDiv{
 width:auto;
 margin-left: 0;
}

}



</style>
